<template>
	<view class="content">
		<view class="nav-part-bg"></view>
		<view class="nav-day">
			<selectDay :outDate="selDay" @selectDay="initPage"></selectDay>
		</view>
		<view class="nav-body" v-if="hisTask.length">
			<view class="sub" v-for="(mitem, mindex) in hisTask" :key="mindex">
				<u-collapse class="collapse">
					<u-collapse-item :title="'线路：' + mitem.lineName" name="Docs guide">
						<view class="step">
							<u-steps direction="column" dot>
								<u-steps-item v-for="(citem, cindex) in mitem.stations" :key="cindex">
									<view class="slot-icon slot-right" slot="icon">{{ cindex }}</view>
									<view class="slot-content" slot="desc">
										<u-tag :text="citem.name"></u-tag>
										<view class="part2">
											<view class="sub-row">
												<text>签到时间:</text>
												<text class="row-cell">{{ citem.driverTime }}</text>
											</view>
										</view>
										<view class="part1">
											<view class="sub-row">
												<view class="row">
													<text>行车三检:</text>
													<text class="row-cell">
														{{ citem.checkOutThree ? (JSON.parse(citem.checkOutThree).result == 0 ? '放行' : '不放行') : '' }}
													</text>
												</view>
												<view class="row">
													<text>安全承诺:</text>
													<text class="row-cell">
														{{ citem.checkOutBefore ? (JSON.parse(citem.checkOutBefore).result == 0 ? '放行' : '不放行') : '' }}
													</text>
												</view>
											</view>
											<view class="sub-row">
												<view class="row">
													<text>车上全票数:</text>
													<text class="row-cell">{{ citem.checkOutCnt1 || '' }}</text>
												</view>
											</view>
											<view class="sub-row">
												<view class="row">
													<text>车上半票人数:</text>
													<text class="row-cell">{{ citem.checkOutCnt2 || '' }}</text>
												</view>
												<view class="row">
													<text>车上免票人数:</text>
													<text class="row-cell">{{ citem.checkOutCnt3 || '' }}</text>
												</view>
											</view>
											<view class="sub-row">
												<text>签字时间:</text>
												<text class="row-cell">{{ citem.driverConfirm1 }}</text>
											</view>
										</view>
										<view class="part1">
											<view class="sub-row">
												<view class="row">
													<text>出站检查:</text>
													<text class="row-cell">
														{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).result == 0 ? '放行' : '不放行') : '' }}
													</text>
												</view>
												<view class="row">
													<text>核载人数:</text>
													<text class="row-cell">{{ citem.securityCnt ? mitem.vehicleSeats : '' }}</text>
												</view>
											</view>
											<view class="sub-row">
												<view class="row">
													<text>实载人数:</text>
													<text class="row-cell">{{ citem.securityCnt || '' }}</text>
												</view>
												<view class="row">
													<text>免票人数:</text>
													<text class="row-cell">{{ citem.securityCnt3 || '' }}</text>
												</view>
											</view>
											<view class="sub-row">
												<text>签字时间:</text>
												<text class="row-cell">{{ citem.driverConfirm2 }}</text>
											</view>
										</view>
									</view>
								</u-steps-item>
							</u-steps>
						</view>
					</u-collapse-item>
				</u-collapse>
				<view class="row-tip">
					<view class="cell">
						<text class="cell-title">司机：</text>
						<text class="cell-content">{{ mitem.driverName }}</text>
						<text class="cell-content">{{ mitem.driverPhone }}</text>
					</view>
					<view class="cell">
						<view class="cell-row-left">
							<text class="cell-title">编号：</text>
							<text class="cell-content">{{ mitem.vehicleCode }}</text>
						</view>
						<view class="cell-row-right">
							<text class="cell-title">车牌：</text>
							<text class="cell-content">{{ mitem.plateNumber }}</text>
						</view>
					</view>
					<view class="cell">
						<text class="cell-title">发车时间：</text>
						<text class="cell-content-time">{{ mitem.taskTime }}</text>
					</view>
					<view :class="[cssSeal(mitem.status)]">
						<view :class="[cssSeal2(mitem.status)]">
							<view class="seal-content">
								<text :class="[cssSeal3(mitem.status)]">{{ textTag(mitem.status) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty class="nav-body" v-else text="查无数据"></empty>
		<tabBar></tabBar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import empty from '@/components/empty.vue';
import common from '@/utils/common.js';
import selectDay from '@/components/selectDay.vue';
import globaljs from '@/api/global.js';
import date from '@/utils/date.js';
export default {
	data() {
		return {
			stepWidth: '100%',
			selDay: new Date(),
			hisTask: []
		};
	},
	computed: { ...mapGetters(['token']) },
	onShow() {
		this.initPage(this.selDay);
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		// #ifndef MP
		uni.hideTabBar();
		// #endif
	},
	methods: {
		initPage(day) {
			this.loadOrder(day);
		},
		async loadOrder(day) {
			//获取指定日期排班历史
			let res = await globaljs.getHistoryOrders(date.formatDate(day, 0), this.token);
			if (common.httpIsWrong(res)) {
				this.hisTask = [];
				return;
			}
			this.hisTask = res.json.data.data;
		},
		viewDetail() {
			uni.navigateTo({
				url: '/pages/orderdetail/orderdetail'
			});
		},
		cssSeal: (status) => {
			switch (status) {
				case 4:
				case 9:
					return 'seal seal-bgcolor';
				case 2:
				case 3:
					return 'seal seal-bgcolor2';
				case 0:
				case 1:
					return 'seal seal-bgcolor3';
			}
		},
		cssSeal2: (status) => {
			switch (status) {
				case 4:
				case 9:
					return 'seal-son seal-s-bgcolor';
				case 2:
				case 3:
					return 'seal-son seal-s-bgcolor2';
				case 0:
				case 1:
					return 'seal-son seal-s-bgcolor3';
			}
		},
		cssSeal3: (status) => {
			switch (status) {
				case 4:
				case 9:
					return 'css-tip seal-color';
				case 2:
				case 3:
					return 'css-tip seal-color2';
				case 0:
				case 1:
					return 'css-tip seal-color3';
			}
		},
		textTag: (status) => {
			switch (status) {
				case 4:
				case 9:
					return '已完成';
				case 2:
				case 3:
					return '进行中';
				case 0:
				case 1:
					return '未开始';
			}
		}
	},
	components: {
		tabBar,
		selectDay,
		empty
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	.nav-day {
		width: 100%;
		height: 100rpx;
		color: white;
		background-color: #1a90e4;
		position: fixed;
		top: var(--window-top, 0);
		z-index: 99;
	}
	.nav-part-bg {
		width: 100%;
		height: 100rpx;
		background-color: #1a90e4;
		position: fixed;
		top: 0;
		z-index: 0;
	}
	.nav-body {
		width: 100%;
		height: 100%;
		position: relative;
		margin-top: 100rpx;
		overflow: scroll;
		.sub {
			height: auto;
			display: flex;
			flex-direction: column;
			margin: 30rpx 20rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			box-shadow: 0px 1px 5px #888888;
			position: relative;
			.tag-vertical {
				position: absolute;
				top: 0;
				left: 0;
				padding: 8rpx 0;
				width: 28px;
				color: #fff;
				text-align: center;
			}
			.tag-vertical::after {
				position: absolute;
				content: '';
				left: 0;
				top: 100%;
				border-style: solid;
				border-width: 0 14px 14px 14px;
			}
			.tag-vertical.color-tip::after {
				border-color: #00d9a9 #00d9a9 transparent #00d9a9;
			}
			.tag-vertical.color-tip {
				background: #00d9a9;
			}
			.tag-vertical.color-tip2::after {
				border-color: #ff5500 #ff5500 transparent #ff5500;
			}
			.tag-vertical.color-tip2 {
				background: #ff5500;
			}
			.tag-vertical.color-tip3::after {
				border-color: #d1d1d1 #d1d1d1 transparent #d1d1d1;
			}
			.tag-vertical.color-tip3 {
				background: #d1d1d1;
			}
			.collapse {
				width: 100%;
			}
			.step {
				display: flex;
				.slot-content {
					height: auto;
					margin: 20rpx 10rpx;
					border-radius: 10rpx;
					border: solid 1rpx #3c9cff;
					border-top: none;
					.part1 {
						border-top: solid 1rpx #3c9cff;
					}
					.part2 {
					}
					.sub-row {
						display: flex;
						align-items: center;
						margin: 20rpx 20rpx;
						.row {
							width: 50%;
						}
						.row-name {
							width: 220rpx;
							border: solid 1rpx #3c9cff;
							color: #3c9cff;
							font-size: 26rpx;
							padding: 5rpx 20rpx;
							border-radius: 10rpx;
							text-align-last: justify;
						}
						.row-cell {
							color: #1a90e4;
							margin: 0 20rpx;
						}
					}
				}
				.slot-icon {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					font-size: 32rpx;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.slot-left {
					background-color: #969799;
				}
				.slot-right {
					background-color: #00ff7f;
				}
				.slot-mid {
					background-color: #ff0000;
				}
			}
			.row-tip {
				padding: 10rpx 30rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				background-color: #e8f2fe;
				.seal {
					width: 110rpx;
					height: 110rpx;
					border: solid 6rpx #b4b4b4;
					border-radius: 100%;
					background-color: white;
					opacity: 0.7;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 0;
					.seal-son {
						width: 100rpx;
						height: 100rpx;
						border: solid 2rpx #b4b4b4;
						border-radius: 100%;
						background-color: white;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						.seal-content {
							position: absolute;
							text-align: center;
							transform: rotate(-45deg);
							color: #d1d1d1;
							font-weight: 900;
							.css-tip {
								font-size: 30rpx;
							}
							.css-time {
								font-size: 20rpx;
							}
							.seal-color {
								color: #00d9a9;
							}
							.seal-color2 {
								color: #ff5500;
							}
							.seal-color3 {
								color: #d1d1d1;
							}
						}
					}
					.seal-s-bgcolor {
						border: solid 2rpx #00d9a9;
					}
					.seal-s-bgcolor2 {
						border: solid 2rpx #ff5500;
					}
					.seal-s-bgcolor3 {
						border: solid 2rpx #d1d1d1;
					}
				}
				.seal-bgcolor {
					border: solid 6rpx #00d9a9;
				}
				.seal-bgcolor2 {
					border: solid 6rpx #ff5500;
				}
				.seal-bgcolor3 {
					border: solid 6rpx #d1d1d1;
				}
				.tip-m {
					color: #3c9cff;
				}
				.cell {
					padding: 10rpx 0;
					display: flex;
					.cell-title {
						letter-spacing: 10rpx;
						font-size: 28rpx;
					}
					.cell-content {
						letter-spacing: 10rpx;
						font-size: 28rpx;
						color: #1a90e4;
						margin: 0 20rpx;
					}
					.cell-content-time {
						letter-spacing: 5rpx;
						font-size: 28rpx;
						color: #1a90e4;
						margin: 0 20rpx;
					}
					.cell-content2 {
						font-size: 28rpx;
						color: #1a90e4;
						margin: 0 20rpx;
					}
					.cell-row-left {
						width: 40%;
					}
					.cell-row-right {
						flex: 1;
					}
					.cell-row {
						width: 50%;
					}
				}
			}
		}
	}
}
::v-deep .u-steps.u-steps--column {
	width: 100%;
}
</style>
